<template>
    <view class="navbar">
        我的
    </view>
    <view class="mine-container">
        <view class="userInfo">
            <view class="userInfo-L">
                <up-avatar class="avatar" src="" size="50"></up-avatar>
                <view class="username-ip">
                    <text class="username">会设计的橙子</text>
                    <text class="ip">ip: 杭州</text>
                </view>
            </view>

            <view class="userInfo-R" @click="handleNavigateTo('../../pagesB/userInfo/index')">
                <text class="text">个人主页</text>
                <u-icon name="arrow-right" :size="8" color="#fff"></u-icon>
            </view>
        </view>
        <view class="main">
            <view class="group" v-for="(item, index) in groupList" :key="index" @click="handleNavigateTo(item.url)">
                <view class="info">
                    <text>{{ item.num }}</text>
                    <text>{{ item.name }}</text>
                </view>
                <text class="line" v-if="item.name != '收藏'">|</text>
            </view>
        </view>
        <view class="featureList">
            <view class="featureItem" v-for="(item, index) in featureList" :key="index" @click="handleNavigateTo(item.url)">
                <view class="title">
                    <view class="icon" :style="{ backgroundColor: item.bg }"><u-icon :name="item.icon" :size="14"
                            color="#fff"></u-icon></view>
                    <text>{{ item.name }}</text>
                </view>
                <u-icon name="arrow-right" :size="14" color="#B1B1B1"></u-icon>
            </view>
        </view>
    </view>
    <view class="bg">
        <up-image src="https://v.iiar.cn/images/mine_bg.png" width="100%" height="600rpx" mode="scaleToFill"></up-image>
    </view>
</template>

<script lang="ts" setup>
import { handleNavigateTo } from '@/plugins/uniApp';
import { getUserInfo } from '@/api/user';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
    getUserInfo().then(res => {
        console.log(res)
    })
})

/* 信息栏的数组数据 */
const groupList = ([
    { name: "帖子", url: "../../pagesB/dynamic/index", num: 0 },
    { name: "关注", url: "../../pagesB/follow/index", num: 0 },
    { name: "粉丝", url: "../../pagesB/fans/index", num: 0 },
    { name: "收藏", url: "../../pagesB/collect/index", num: 0 }
])
/* 功能列表的数组数据 */
const featureList = ([
    { name: "活动", url: "../../pagesB/activity/index", icon: 'tags-fill', bg: '#F65773' },
    { name: "闲置", url: "../../pagesB/idle/index", icon: 'bag-fill', bg: '#FAC554' },
    { name: "客服中心", url: "", icon: 'server-man', bg: '#FF6150' },
    { name: "设置", url: "../../pagesB/setting/index", icon: 'setting-fill', bg: '#7DA4E7' }
])
</script>

<style lang="scss" scoped>
.navbar {
    color: #fff;
    font-size: 38rpx;
    margin: 60rpx 40rpx;
}

.bg {
    position: absolute;
    top: 0;
    width: 100%;

    z-index: -1;
}

.mine-container {


    .userInfo {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx;
        color: #fff;

        .userInfo-L {
            display: flex;
            flex-direction: row;

            .username-ip{
                display: flex;
                flex-direction: column;
                margin-left: 30rpx;

                .ip {
                    margin-top: 30rpx;
                    font-size: 25rpx;
                }

            }
        }

        .userInfo-R{
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 34rpx;

            .text{
                margin-bottom: 6rpx;
                margin-right: 12rpx;
            }
        }
    }

    .main {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        margin-top: 20rpx;
        color: #fff;

        .group {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 30rpx;

            .info{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .line{
                position: relative;
                left: 60rpx;
            }
        }
    }

    .featureList {
        display: flex;
        flex-direction: column;
        margin-top: 60rpx;

        .featureItem{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1rpx solid #F5F5F5;
            padding: 40rpx 0;
            margin: 0 40rpx;
            font-size: 32rpx;

            .title {
                display: flex;
                flex-direction: row;
                align-items: center;

                .icon {
                    margin-right: 20rpx;
                    padding: 12rpx;
                    border-radius: 50%;
                }
            }

        }
        
    }
}
</style>